<template>
  <div>
    <el-dialog
      title="产品信息"
      :visible.sync="visible"
      width="50%"
      :before-close="cancel"
      @open="open"
    >
      <div class="dialog-content">
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline" />
              样例图
            </template>
            <el-avatar shape="square" :src="productInfo.imageUrl"></el-avatar>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              当前状态
            </template>
            <el-tag type="success" v-if="productInfo.state === 1">
              审核通过
            </el-tag>
            <el-tag type="error" v-else-if="productInfo.state === -1">
              拒绝通过
            </el-tag>
            <el-tag type="primary" v-else> 等待审核 </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              产品名称
            </template>
            {{ productInfo.productName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              申请时间
            </template>
            {{ productInfo.applyTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              所属类型
            </template>
            {{ productInfo.typeInfo.productType }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              所属类型
            </template>
            {{ productInfo.typeInfo.description }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              审批人
            </template>
            {{ productInfo.purchaser }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              审批时间
            </template>
            {{ productInfo.verifyTime }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // eslint-disable-next-line vue/require-default-prop
    data: {
      type: Object,
    },
  },

  data() {
    return {
      productInfo: {
        imageUrl: "",
        productName: "",
        state: "",
        typeInfo: {
          id: "",
          productType: "",
          description: "",
        },
        purchaser: "",
        applyTime: "",
        verifyTime: "",
      },
    };
  },

  methods: {
    open() {
      this.productInfo = this.data;
    },
    cancel() {
      this.initproductInfo();
      this.$emit("cancel");
    },
    initproductInfo() {
      this.productInfo = {
        imageUrl: "",
        productName: "",
        state: "",
        typeInfo: {
          id: "",
          productType: "",
          description: "",
        },
        purchaser: "",
        applyTime: "",
        verifyTime: "",
      };
    },
  },
};
</script>

<style>
</style>
